@import "color.variables";

@for $i from 1 through 10 {
  .q-col-#{$i}0pct {
    width: calc(10% * #{$i})
  }
}

@for $i from 1 through 24 {
  .q-col-#{$i} {
    width: calc(100% / 24 * #{$i})
  }
}

@each $name, $color in $colors {
  .border-#{"" + $name} {
    border: .1rem solid #{$color};
  }
}

.q-btn {
  text-transform: capitalize;
}

.q-btn .q-icon, .q-btn .q-spinner {
  font-size: 1.25rem;
}

.q-btn--rectangle {
  min-height: 2rem;
}

.q-btn--round {
  aspect-ratio: 1/1;
}

.q-scrollarea .q-scrollarea__content {
  width: inherit;
}

.qx-table--menu-td {
  .q-btn--dense.q-btn--round {
    min-width: 1.5rem;
    min-height: 1.5rem;
  }
}

.q-table--dense .q-table tbody td {
  height: 2.15rem;
}

.q-table--dense .q-table thead tr th {
  height: 2.6rem;
}

.on-left {
  margin-right: .25rem;
}

.on-right {
  margin-left: .25rem;
}

.q-spinner {
  cursor: wait;
}

.q-inner-loading {
  cursor: wait;
  z-index: 10;
}

.q-stepper {
  .q-stepper__tab, .q-stepper__step-inner {
    padding: 0;
    min-height: auto;
  }
}

.q-tree__node-header .q-tree__arrow {
  z-index: 1;
}

.q-item__section--avatar {
  min-width: 1.2rem;
}

.q-item, .q-item--dense,
.q-tab, .q-tabs--dense .q-tab {
  min-height: 1.5rem;
}

.q-item__section--side {
  padding-right: .5rem;
  color: inherit;
}

.q-date__view {
  height: 18.75rem;
}

body.desktop {
  .q-chip--clickable:focus {
    box-shadow: 0 0 0 transparent;
  }

  .q-item--active > .q-focus-helper {
    background: currentColor;
    opacity: .15;
  }
}

.q-chip {
  height: 1.8rem;
  margin: .125rem;
  padding: .4rem .8rem;

  .q-chip__icon--right {
    margin-left: .0625rem;
  }
}

.q-chip--dense {
  height: 1.5rem;
  padding: .2rem .4rem;
}

.q-badge--rounded {
  border-radius: 100%;
  width: .5rem;
  aspect-ratio: 1/1;
  padding: 0;
  line-height: 1;
  min-height: auto;
}

.q-badge-dot {
  padding: 0;
  position: relative;
  min-width: .5rem;
  min-height: .5rem;
  top: -0.025rem;
  aspect-ratio: 1 / 1;
}

.absolute-badge-dot {
  position: absolute;
  left: inherit;
  top: calc(50% - 0.02rem);
  transform: translateY(-50%);
}

.q-btn-tip {
  i {
    opacity: .8;
    transition: tip-out, transform .3s ease;
  }

  i:hover {
    opacity: 1;
    transform: scale(1.2);
  }

  @keyframes tip-out {
    from {
      transform: scale(1.2);
    }

    to {
      transform: scale(1);
    }
  }
}

.q-btn-refresh {
  i {
    transition: refresh-out, transform .5s ease;
  }

  i:hover {
    transform: rotate(360deg);
  }

  @keyframes refresh-out {
    from {
      transform: rotate(360deg);
    }

    to {
      transform: rotate(0);
    }
  }
}

.q-btn-close {
  i {
    transition: close-out, transform .3s ease;
  }

  i:hover {
    transform: rotate(180deg);
  }

  @keyframes close-out {
    from {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(0);
    }
  }
}